<template>
  <el-dialog v-model="dialogTableVisible" title="无人机采样信息" width="500px">
    <el-table v-model:data="gridData" style="width: 100%">
      <el-table-column label="" prop="trackName" />
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="small" placeholder="Type to search" />
        </template>
        <template #default="scope">
          <el-button size="small" @click="handleDone(scope.$index, scope.row)"
          >展示</el-button
          >
          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        class="mt-4"
        v-model:page-count="pageCnt"
        v-model:current-page="crrntPage"
        @current-change="handleCurrentChange"
        style="text-align: center"
    />
  </el-dialog>
</template>

<script>

import request from "@/utils/request";
import { ElMessageBox ,ElMessage} from 'element-plus'
export default {

  name: "TrackInfoDialog",
  mounted() {
    this.getTrackInfo()
  },
  data(){
    return {
      gridData: [],
      store:this.$store,
      pageCnt:5,
      crrntPage: 1
    }
  },
  computed:{
    dialogTableVisible:{
      get (){
        return this.store.state.trackInfoDialogVisible;
      },
      set(trackInfoDialogVisible){
        this.store.commit('setTrackInfoDialogVisible',trackInfoDialogVisible);
      }
    },
  },
  methods:{
    handleCurrentChange:function (page){
      console.log(page)
      request.get("/track/listByPage/"+page).
      then(res=>{
        if(res){
          this.gridData = res.data.track_list;
          this.pageCnt = res.data.pageCnt;
          //this.store.commit('updateFlightTasks',res.data);
        }else {
          console.log("请求采样信息失败");
        }
      })
    },
    handleDone:function (index,row) {
      console.log('okokok')
      let track = row.track;
      let trackInfoPath = [];
      for(let i=0;i<track.length;i++){
        trackInfoPath[i] = [track[i].longitude,track[i].latitude];
      }
      this.store.state.map.setCenter(trackInfoPath[0]);
      this.store.commit('setTrackInfoPath',trackInfoPath);
      this.store.commit('setTrackInfoDialogVisible',false);
    },
    handleDelete:function (index,row){
      ElMessageBox.confirm(
          '是否删除该采样信息?',
          '警告',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        request.get("/track/delete/"+row.trackId).then(res=>{
          ElMessage({
            type: 'info',
            message: res.data.msg,
          });
          this.getTrackInfo();
        })
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '删除取消',
        })
      })
    },
    getTrackInfo:function(){
      //获取所有无人机任务
      request.get("/track/listByPage/1").
      then(res=>{
        if(res){
          this.gridData = res.data.track_list;
          this.pageCnt = res.data.pageCnt;
          //this.store.commit('updateFlightTasks',res.data);
        }else {
          console.log("请求采样信息失败");
        }
      })
    },

  }
}
</script>

<style scoped>

</style>